<!--  -->
<template>
  <div class style="background:#fff;overflow: hidden;">
    <!-- <router-view></router-view> -->
    <!-- 顶部 -->
    <div class="topbg">
    <div class="top">
      <div class="avatar">
        <van-image class="avatarSty" round  src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <div style>
          <p style="display:flex;align-items: center">
            <span class="username">李大白</span>
            <span class="levelBg"><span style="padding:0 0 2px 10px" >会员v1</span></span>
          </p>
          <p class="score" style="">
            <span style="color:#C4C4C4">
              积分：
              <span style="color:#C4C4C4">8889998</span>
            </span>
          </p>
        </div>
      </div>
      <div class="infos">
        <van-icon name="chat-o" badge="99+" color="#fff" size="20" />
      </div>
    </div>
    </div>

    <!-- 内容 -->
    <div class="moneycenter">
      <div class="moneybox" style="">
        <div style="font-size:12px"  >金额(元)</div>
        <div class="money">
          <span class="num">¥88.00</span>

          <van-button  class="btn_charge" @click.native="charge" round >充值</van-button>
        </div>
        <div class="disf disf_jc">
          <div class="rate_money">
            <p style="font-size:12px">代收利息(元)</p>
            <p style="color:#434050"><span>¥</span> <span  style="font-size:20px;font-weight: 700;"> 88.00</span></p>
          </div>
          <div class="ori_money">
            <p style="font-size:12px">代收本金(元)</p>
            <p style="color:#434050"><span>¥</span><span  style="font-size:20px;font-weight: 700;"> 88.00</span></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="btn_group">
        <van-button class="cash_in" round @click.native="cashout">提现</van-button>
        <van-button class="cash_out" round @click.native="carryover">转账</van-button>
    </div>
    <div class="line"></div>
    <!-- 其他 -->
    <div class="other">
        <h3 class="otherH3" style="">其他</h3>
        <div class="disf" style="margin-top:30px">
            <p class="cloum"><img class="icon_other" src="../../assets/vip/safe.png" alt="">安全中心</p>
            <p class="cloum"><img class="icon_other" src="../../assets/vip/gift.png" alt="">邀请好友</p>
            <p class="cloum"><img class="icon_other" src="../../assets/vip/note.png" alt="">用户协议</p>
            <p class="cloum"><img class="icon_other" src="../../assets/vip/lock.png" alt="">隐私协议</p>
        </div>
    </div>
    <!-- 商标 -->
    <div class="copy_right">
        <div class="disf" style="font-size:16px"><img class="copy_righimgtSty" style="" src="../../assets/vip/brand.png" alt="">源聚通</div>
        <div style="font-size: 11px;margin-top:5px">版本V4.1.2</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "vip",
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    charge(){
      this.$router.push({
        path:'charge'
      })
    },
    cashout(){
      this.$router.push({
        path:'cashout'
      })
    },
    carryover(){
      this.$router.push({
        path:'carryover'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */

.topbg {
background: url("../../assets/vip/bgblack.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 193px;
}
.top {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px;
  align-items: center;
  
}
.avatar {
  display: flex;
  align-items: center;
}
.avatarSty{
  width:40px; height:40px;

}
.moneybox{
padding:20px 12px
}
.username {
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}
.score{
  font-size:11px;
   color: #ffffff;
}
.levelBg {
  width: 65px;
  height: 20px;
  background: url("../..//assets/vip/leval.png") no-repeat;
  /* background: #eee; */
  background-size: 100% 100%;
   color: #414B78;
   display: flex;
   justify-content: center;
   align-items: center;
   
}
.moneycenter {
  width: 94%;
  height: 176px;
  /* background: url("../../assets/vip/vipbg.png") no-repeat; */
  background: url("../../assets/vip/yellow.png") no-repeat;

  background-size: 100% 100%;
  margin: auto;
  color: #92764D;
  margin-top: -110px;
  /* padding-top: 8px; */
}
.money {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.num {
  font-size: 38px;
  color: #434050;
  font-weight: 700;
}
.btn_charge{
    width: 87px;
    height: 36px;
    color: #434050;
    font-size: 20px;
}
.btn_group {
  display: flex;
  justify-content: space-around;
  padding: 15px;
}
.cash_in,
.cash_out {
  width: 165px;
  height: 39px;
}
.cash_in {
  color: #3f3f3f;
  border: 1px solid #3f3f3f;
}
.cash_out {
  color: #ff4b36;
  border: 1px solid #ff4b36;
}
.cash_out{
    color: #92764D;
    border: 1px solid #92764D;
}
.other {
  width: 100%;
  height: 200px;
  border: 1px solid #eee;
}
.icon_other {
  width: 20px;
  height: 23px;
}
.otherH3{
  line-height: 50px;padding-left: 15px;
}
.icon_other{
    width: 20px;
    height: 23px;
}
.cloum{

    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    color: #717171;
    font-size: 12px;line-height: 36px;
}
.copy_right{
    color: #E0E0E0;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background:#F7F8F9;
    padding: 10px 0;
        /* position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -50px;
    width: 100px; */

}
.copy_righimgtSty{
width:24px;height:24px
}
</style>